@mixin preSpace($value,$n,$name) {
    .#{$n}-#{$value} {
        #{$name}:#{$value}px; 
    }
    .#{$n}l-#{$value} {
        #{$name}-left:#{$value}px; 
    }
    .#{$n}r-#{$value} {
        #{$name}-right:#{$value}px; 
    }
    .#{$n}t-#{$value} {
        #{$name}-top:#{$value}px; 
    }
    .#{$n}b-#{$value} {
        #{$name}-bottom:#{$value}px; 
    }
    .#{$n}x-#{$value} {
        #{$name}-left:#{$value}px; 
        #{$name}-right:#{$value}px; 
    }
    .#{$n}y-#{$value} {
        #{$name}-top:#{$value}px; 
        #{$name}-bottom:#{$value}px; 
    }
}

@include preSpace(5,'m','margin');
@include preSpace(10,'m','margin');
@include preSpace(15,'m','margin');
@include preSpace(20,'m','margin');
@include preSpace(30,'m','margin');

@include preSpace(5,'p','padding');
@include preSpace(15,'p','padding');
@include preSpace(10,'p','padding');
@include preSpace(20,'p','padding');
@include preSpace(30,'p','padding');
.h-100{
    height: 100%;
}
